<template>
  <cell class="order-item-lists">
    <x-icon class="ios-close-outline" type="ios-close-empty" size="20"  @click="$emit('remove', '1233')"></x-icon>
    <div class="top">
      <div class="left">
        <avatar username="Lairenna Doe" src="orderItem.creator && orderItem.creator.avatar" :size="40"></avatar>
      </div>
      <div class="right">
        <div class="right-1">
          <div>
            {{orderItem.creator && orderItem.creator.nickname}}
            <!-- <span class="score">{{9.8}}分</span> -->
          </div>
          <div>
            <span>{{getTime(orderItem.createTime)}}</span>
          </div>
        </div>
        <div class="right-2">
          <span class="order-price" v-show="orderItem.price">¥{{orderItem.price}}</span>
          <!-- <span class="order-status-btn" v-show="item.status===2">已完成</span> -->
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-item">
        <div>备注</div>
        <div class="value">{{`${orderItem.gender || ''} ${orderItem.desc || ''} ${orderItem.note || ''}`}}</div>
      </div>
      <div class="main-item">
        <div>取件地址</div>
        <div class="value">{{orderItem.fromPlace}}</div>
      </div>
      <div class="main-item">
        <div>送件地址</div>
        <div class="value">{{orderItem.toPlace}}</div>
      </div>
      <div class="main-item">
        <div>开始时间</div>
        <div class="value">{{formateTime(orderItem.startTime)}}</div>
      </div>
      <div class="main-item">
        <div>结束时间</div>
        <div class="value">{{formateTime(orderItem.endTime)}}</div>
      </div>
      <div class="main-item">
        <div>联系方式</div>
        <div class="value">{{orderItem.creator && orderItem.creator.tel}}</div>
      </div>
    </div>
  </cell>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import Avatar from 'vue-avatar';
import { Cell } from 'vux';
import { formatMsgTime } from '../../js/getTime'
import moment from 'moment';
@Component({
  components: { Avatar, Cell }
})
export default class OrderItemDialgo extends Vue {
  @Prop(Object) orderItem
  formateTime (t) {
    if (t) {
      return moment(t * 1000).format('YYYY-MM-DD HH:mm:ss')
    }
  }
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
}
</script>
<style lang="less">
  .order-item-lists:before {
    content: initial !important;
  }
  .order-item-lists {
    // font-size: 12px;
    background: #ffffff;
    direction: flex;
    border-radius: 10px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 5px;
    position: relative;
    .main {
      .main-item {
        white-space: wrap;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        // border-bottom: 1px dashed #dddddd;
        .value {
          width: 210px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // text-align: right;
          white-space: wrap!important;
        }
      }
    }
    .score {
      color: #666666;
      font-size: 14px;
      margin-left: 10px;
    }
    .order-price {
      color: red;
      font-size: 16px;
      margin-right: 15px;
      line-height: 54px;
    }
    .ios-close-outline {
      position: absolute;
      top: 5px;
      right: 5px;
    }
    .weui-cell__ft {
      text-align: left;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .img-list {
      display: flex;
      align-items: center;
      padding: 5px 0;
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #EFA79B;
      }
    }
    .order-status-btn {
      color: #666666;
      font-size: 14px;
    }
    .item-title {
      color: #666666;
    }
    .con-head {
      font-size: 14px;
    }
    .top {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right {
      // font-size: 12px;
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .weui-btn {
        // font-size: 12px;
        overflow: initial;
      }
    }
    .right-1 {
      display: flex;
      flex-direction: column;
    }
    .right-2 {
      display: flex;
      align-items: center;
    }
    .bot {
      height: 48px;
      display: flex;
      align-items: center;
    }
  }
</style>


